<template>
  <d2-container>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="enterpriseType"
        label="企业类型"
        width="180">
        <template slot-scope="scope">

          <el-tag v-if="scope.row.enterpriseType === 0">个人独资企业</el-tag>
          <el-tag v-if="scope.row.enterpriseType === 1">合伙企业</el-tag>
          <el-tag v-if="scope.row.enterpriseType === 2">公司制企业</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="enterpriseName"
        label="企业名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="企业地址">
      </el-table-column>
      <el-table-column
        prop="IdFront"
        label="身份证正面">
        <template slot-scope="scope">
          <el-image
            lazy
            style="width:100px;height: 80px;"
            :preview-src-list="[scope.row.IdFront]"
            :src="scope.row.IdFront"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="IdBack"
        label="身份证反面">

        <template slot-scope="scope">
          <el-image
            lazy
            style="width:100px;height: 80px;"
            :preview-src-list="[scope.row.IdBack]"
            :src="scope.row.IdBack"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="businessLicense"
        label="营业执照">
        <template slot-scope="scope">
          <el-image
            lazy
            style="width:100px;height: 80px;"
            :preview-src-list="[scope.row.businessLicense]"
            :src="scope.row.businessLicense"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="企业状态">
        <template slot-scope="scope">

          <el-tag type="info" v-if="scope.row.status === 0">待审核</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 1">审核拒绝</el-tag>
          <el-tag v-if="scope.row.status === 2">审核通过</el-tag>
        </template>

      </el-table-column>
      <el-table-column
        label="创建人">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.user ? scope.row.user.nickname : "暂无" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        width="210"
        label="操作">
        <template slot-scope="scope">
          <el-row v-if="scope.row.status === 0">
            <el-popconfirm
              @confirm="()=>handleSetStatus(scope.row._id,2)"
              title="是否通过企业审核？"
            >
              <el-button type="primary" round size="small" slot="reference">通过审核</el-button>
            </el-popconfirm>
            <el-popconfirm
              @confirm="()=>handleSetStatus(scope.row._id,1)"
              title="是否拒绝企业审核？"
            >
              <el-button type="danger" round size="small" slot="reference">拒绝审核</el-button>
            </el-popconfirm>
          </el-row>
          <el-tag type="info" v-else>无法操作</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :pageInfo="pageInfo" :total="total" :handleCurrentChange="handleCurrentChange"
                :handleSizeChange="handleSizeChange"/>
  </d2-container>
</template>

<script>
import api from '@/api'
import Pagination from "@/components/Pagination/index.vue";
export default {
  components: {Pagination},
  comments: {
    Pagination
  },
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        pageSize: 10,
        current: 1
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const {pageSize,current,rows,count} = await api.GET_ENTERPRISE(this.pageInfo);
      this.tableData = rows;
      this.pageInfo = {
        pageSize,
        current
      }
      this.total = count
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageInfo.pageSize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageInfo.current = val
      this.fetchData()
    },
    async handleSetStatus(id, status) {
      await api.SET_ENTERPRISE_STATUS(id, {status})
      this.$message('修改成功');
      await this.fetchData()
    }

  }
}
</script>
